<template>
    <div class="headers">
        <div class="headers-roof" v-if="showRoof">
            <div class="hroof-content">
                <div class="clearfix hroof-list">
                    <router-link :to="{name:'Login'}" tag="a" class="hoverwords">立即登录</router-link>
                    <router-link :to="{name:'Register'}" tag="a" class="hoverwords">免费注册</router-link>
                    <div class="hroof-user" @mouseenter="hoverInUser" @mouseleave="hoverOutUser">guidaobao <img
                            src="@/assets/images/u13.png" alt="">
                        <transition name="slide-fade">
                            <div class="hroof-usermodal" v-if="userModal">
                                <div class="hroof-useritem">合同中心</div>
                                <div class="hroof-useritem">安全中心</div>
                                <div class="hroof-useritem">退出登录</div>
                            </div>
                        </transition>
                    </div>
                    <a class="hoverwords">在线客服</a>
                    <div>免费热线：400-888-1888</div>
                </div>
            </div>
        </div>
        <div class="headers-navsection">
            <div class="clearfix hnavsection">
                <router-link tag="div" :to="{name:'index'}" class="hnavsection-logo"><img
                        src="@/assets/images/logo@2x.png" alt=""></router-link>
                <div class="hnavsection-wrods" v-if="isLoginPage">用户登录</div>
                <div class="hnavsection-wrods" v-if="isRegPage">用户注册</div>
                <div class="hnavsection-roreg" v-if="isRegPage">已有账号，
                    <router-link tag="a" :to="{name:'Login'}">立即登录</router-link>
                </div>
                <div class="hnavsection-list" v-if="showRoof">
                    <router-link :to="{name:'Login'}" tag="a" class="hoverwords">首页</router-link>
                    <router-link :to="{name:'Ordercenter'}" tag="a" class="hoverwords">合同中心</router-link>
                    <router-link :to="{name:'Safecenter'}" tag="a" class="hoverwords">安全中心</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex'

    export default {
        name: 'pageHeader',
        props: {
            showRoof: {
                type: Boolean,
                default: true
            },
            isRegPage: {
                type: Boolean,
                default: false
            },
            isLoginPage: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                token: this.$store.state.token,
                userModal: false
            }
        },
        created() {

        },
        computed: {},

        mounted() {
            console.log(this.$route)
        },

        methods: {
            hoverInUser() {
                this.userModal = true
            },
            hoverOutUser() {
                this.userModal = false
            },
        }
    }
</script>

<style scoped lang="scss">
    .slide-fade-enter-active {
        transition: all .3s ease;
    }

    .slide-fade-leave-active {
        transition: all .4s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active 用于 2.1.8 以下版本 */
    {
        transform: translateY(-30px);
        opacity: 0;
    }
</style>
